<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>PYGS - Google Maps JavaScript API Example: Simple Map</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAHFtBmYQWDP8PcA2IKH4PlRSHHTs5xZB6XIlxD3mfxH_Y25X86BT7xj7XHwC8wqy1NNxkDXsbH-R2mg"
            type="text/javascript"></script>
	<script src="sha1.js" type="text/javascript"></script>
            
    <script type="text/javascript">

    var map;
    var geoXml; 
    var toggleState = 0;

    function initialize() {
      if (GBrowserIsCompatible()) {
        /* TODO: If dont need update on every query - replace <&un=" + Math.round(Math.random() * 1000000)> to <"> */
        /*geoXml = new GGeoXml("http://91.146.55.55/pygsRequestHandler/?call=getTrek&token=8a5cdd3f7efc5ffd4f19f97c3bffcb54&trekingObjectId=1&dateFrom=2009111900:00:00&dateTo=2009111913:01:59&un=" + Math.round(Math.random() * 1000000));*/
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(56.85, 53.20), 11); 
        map.setUIToDefault();
        /*map.addOverlay(geoXml);*/
        
      }
    }

    function toggleMyKml() {
      if (toggleState == 1) {
        map.removeOverlay(geoXml);
        toggleState = 0;
      } else {
        map.addOverlay(geoXml);
        toggleState = 1;
      }
    }

    function updateTrek() {
		if ($('#txtToken').attr("value") == "")
			return;
		if (toggleState == 1) {
			map.removeOverlay(geoXml);
		}
		getTrekPath = "http://91.146.55.55/pygsRequestHandler/?call=getTrek&token=" + $('#txtToken').attr("value") 
			+ "&trekingObjectId=" + $('#txtTrekingObject').attr("value") 
			+ "&dateFrom=" + $('#txtDateFrom').attr("value").replace(/-/g,"").replace(/ /g,"") 
			+ "&dateTo=" + $('#txtDateTo').attr("value").replace(/-/g,"").replace(/ /g,"") 
			+ "&un=" + getRndStr();
		/*alert(getTrekPath);*/
        geoXml = new GGeoXml(getTrekPath);
        map.addOverlay(geoXml);
        toggleState = 1;
    }
    
    function tryLogin() {
		user = $('#txtUserName').attr("value");
		pass = $('#txtPass').attr("value");
		sha1Pass = SHA1(pass);
		/*alert(sha1Pass);*/
		loginPath = "http://91.146.55.55/pygsRequestHandler/?call=login&user=" 	+ user + "&pass=" + sha1Pass + "&un=" + getRndStr();
		$.ajax({
			url: loginPath,             // указываем URL и
			dataType : "text",                     // тип загружаемых данных
			success: function (data, textStatus) { // вешаем свой обработчик на функцию success
					$('#txtToken').attr({value: data});
			}
		});
    }    
	
	function getRndStr() {
		return Math.round(Math.random() * 1000000);
	}
	
    </script>

	<script src="jquery13/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="jquery_ui_datepicker/jquery_ui_datepicker.js" type="text/javascript"></script>
	<script type="text/javascript">
		/* <![CDATA[ */
			$(function() {
					  $('#txtDateFrom').datetime({
										userLang	: 'en',
										americanMode: false,
									});
					  $('#txtDateTo').datetime({
										userLang	: 'en',
										americanMode: false,
									});								
				});
		/* ]]&gt; */
		</script>
	<script src="jquery_ui_datepicker/i18n/ui.datepicker-de.js" type="text/javascript"></script>
	<script src="jquery_ui_datepicker/timepicker_plug/timepicker.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="jquery_ui_datepicker/timepicker_plug/css/style.css" />
	<link rel="stylesheet" type="text/css" href="jquery_ui_datepicker/smothness/jquery_ui_datepicker.css" />

  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;">
    </div>
    <div style="width: 260px; height: 480px; float:left; border: 1px solid black;">
		<table width="100%">
			<tbody>
				<tr valign="middle">
					<td>
						User name:
					</td>
					<td>
						<input type="text" id="txtUserName" value="User1" />
					</td>
				</tr>
				<tr valign="middle">
					<td>
						Password:
					</td>
					<td>
						<input type="text" id="txtPass" value="11111" />
					</td>
				</tr>
				<tr valign="middle">
					<td colspan="2" align="center">
						<input type="button" id="btnLogin" value="Login" style="width:100px;" onclick="tryLogin();" />
					</td>
				</tr>
				<tr valign="middle">
					<td>
						Token:
					</td>
					<td>
						<input type="text" id="txtToken" value="" />
					</td>
				</tr>
				<tr valign="middle">
					<td>
						Treking object:
					</td>
					<td>
						<input type="text" id="txtTrekingObject" value="1" />
					</td>
				</tr>
				<tr valign="middle">
					<td>
						Date From:
					</td>
					<td>
						<input id="txtDateFrom" type="text" value="2009-11-19 12:00:00" />
					</td>
				</tr>
				<tr valign="middle">
					<td>
						Date To:
					</td>
					<td>
						<input id="txtDateTo" type="text" value="2009-11-19 12:04:00" />
					</td>
				</tr>
				<tr valign="middle">
					<td colspan="2" align="center">
						<input type="button" id="btn" value="Update" style="width:100px;" onclick="updateTrek();" />
					</td>
				</tr>				
			</tbody>
		</table>
    </div>
    <br clear="all"/>
    <br/>
    <!--
    <input type="button" value="Toggle KML" onclick="toggleMyKml();"/>
    -->
  </body>
</html>
